<template>
  <div class="login-wrap">
    <el-row class="login" type="flex" justify="center">
      <el-form ref="form" :model="form">
        <el-form-item>
          <el-input
            v-model="form.userName"
            clearable
            prefix-icon="el-icon-user"
            placeholder="请输入帐号"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-input
            v-model="form.passWord"
            show-password
            prefix-icon="el-icon-lock"
            placeholder="请输入密码"
          ></el-input>
        </el-form-item>
        <el-row type="flex" justify="center">
          <el-button type="primary" :loading="btnLoading" @click="loginHandler">登录</el-button>
        </el-row>
      </el-form>
    </el-row>
  </div>
</template>

<script>
import { getTokenByLogin } from "@/api/auth.js";
export default {
  name: "login",
  data() {
    return {
      form: {
        userName: "",
        passWord: ""
      },
      btnLoading: false
    };
  },
  methods: {
    loginHandler() {
      this.btnLoading = true;
      console.log(this.form);

      getTokenByLogin({
        username: this.form.userName,
        password: this.form.passWord
      }).then(res => {
        this.btnLoading = false;
        this.$store.dispatch("app/setTokenInfo", res.data);
        this.$router.push("/sub/1");
      });
      // setTimeout(() => {
      //   this.btnLoading = false
      //   let tokenInfo = {
      //     access_token:'eyJhbGciOiJI.UzI1NiIsInR5cCI.6IkpXVCJ9',
      //     token_type:'bearer'
      //   }
      //   this.$store.dispatch('app/setTokenInfo',tokenInfo)
      //   this.$router.push('/sub/1')
      // },3000)
    }
  }
};
</script>

<style lang="scss" scoped>
.login-wrap {
  position: fixed;
  z-index: 1000;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  width: 100%;
  padding-top: 20vh;
  background: #ffffff;
}
</style>
